import React, { useState } from 'react';
import styles from './index.less';
import { Steps, Button, Popconfirm } from 'antd';
const { Step } = Steps;

export default function Page() {
  const [curStep, setCurStep] = useState(0);
  const handleStepChange = () => {};
  const contentItem = (text: string) => {
    return <div className={styles.contentItem}>{text}</div>;
  };
  const stepsData = [
    {
      title: '发布申请',
      content:
        '请在P版构建完成,点击通过按钮后点击发布申请按钮,并填写完发布申请',
    },
    {
      title: '部署',
      content: '请在发布应用中找到对应的项目,状态为目标的项目点击部署',
    },
    {
      title: '伸缩',
      content: '在发布应用中找到对应的项目,把之前的项目伸缩值改为0',
    },
  ];
  const confirm = () => {
    if (curStep === 2) {
      return;
    }
    setCurStep(curStep + 1);
  };
  const cancel = () => {};
  return (
    <div className={styles.publishBox}>
      <Steps
        direction="horizontal"
        className={styles.step}
        current={curStep}
        onChange={handleStepChange}
      >
        {stepsData.map((item: any, index: number) => {
          return (
            <Step
              title={<span className={styles.whiteText}>{item.title}</span>}
            />
          );
        })}
      </Steps>
      {/* 提示内容 */}
      {contentItem(stepsData[curStep].content)}
      <Popconfirm
        title={`是否已经完成了${stepsData[curStep].title}相关的操作`}
        onConfirm={confirm}
        onCancel={cancel}
        okText="确定"
        cancelText="取消"
      >
        <Button type="primary" size="middle" className={styles.nextButton}>
          下一步
        </Button>
      </Popconfirm>
    </div>
  );
}
